<%--
  Created by IntelliJ IDEA.
  User: 10459
  Date: 2020/11/28
  Time: 10:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <style>
        * {
            margin: 0 auto;
            padding:0;
            list-style: none;
        }
        .header-a{
            text-decoration: none;
            color: #CCCCCC;
        }
        .header-a:hover{
            color: black;
        }
        .header_li1{
            float: left;
            line-height: 30px;
            margin-left: 24px;
            text-align: center;
        }
        .header_li1 a{
            color:#FFFFFF;
            text-decoration: none;
            font-size: 13px;
            border-right: #CCCCCC;
        }
        .header_li1 a:hover{
            color:#FFFF00;
        }

    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script>

        function changeVerifyCode() {
            var img = document.getElementById("checkCode");
            img.src = "getCheckCode?" + (new Date()).getTime();
        }

    $(function () {
            //1. 自定义手机验证
            $.validator.addMethod("isphone",function(value,element,param) {
                // 手机号码正则
                var reg = /^1[3|4|5|6|7|8]\d{9}$/;
                var res = reg.test(value.trim());
                return res;
            })
            var userName = "${user.name}"
            var text = "[<a href= 'toLoginPage'>登录</a>]&nbsp;[<a href= 'toRegisterPage'>免费注册</a>]"
            if(userName != "") {
                text = userName + "&nbsp;&nbsp[<a href= 'logout'>注销</a>]";
            }
            $.validator.addMethod("isregister",function(value,element,param) {
                // 用户名校验
                var flag = false;
                $.ajax({
                    url:"checkRegister",
                    async:false,
                    data:{"loginName":value},
                    dataType:"json",
                    success:function (data) {
                        flag = data.data
                    }
                })
                return flag;
            })
            $("#loginSpan").html(text)
            $("#myregister").validate({
                rules:{
                    loginName:{
                        required:true,
                        rangelength:[3,8],
                        isregister:true
                    },
                    password:{
                        required:true,
                        rangelength:[5,10]
                    },
                    password2:{
                        required:true,
                        rangelength:[5,10],
                        equalTo:"#password"
                    },
                    phone:{
                        isphone:true
                    },
                    code:{
                        required:true
                    }

                },
                messages:{
                    loginName:{
                        required:"<span style=\"color : red;margin-left: 5px\">用户名必填</span>",
                        rangelength:"<span style=\"color : red;margin-left: 5px\">用户名必须是3-8位</span>",
                        isregister:"<span style=\"color : red;margin-left: 5px\">用户名已注册</span>"
                    },
                    password:{
                        required:"<span style=\"color : red;margin-left: 5px\">密码不能为空</span>",
                        rangelength:"<span style=\"color : red;margin-left: 5px\">密码必须是5-10位</span>"
                    },
                    password2:{
                        required:"<span style=\"color : red;margin-left: 5px\">密码不能为空</span>",
                        rangelength:"<span style=\"color : red;margin-left: 5px\">密码必须是5-10位</span>",
                        equalTo:"<span style=\"color : red;margin-left: 5px\">两次密码不一样</span>"
                    },
                    phone:{
                        isphone: "<span style=\"color : red;margin-left: 5px\">手机号码格式不正确</span>"
                    },
                    code:{
                        required:"<span style=\"color : red;margin-left: 5px\">验证码不能为空</span>"
                    }

                }
            })
        })
    </script>
</head>
<body>

<div style="height: 32px;width: 100%;background-color: #EFEFEF;">
    <!--头页的第一部分-->
    <div style="height: 32px;width: 1000px;font-size: 12px;line-height: 32px;text-align:right">
        官方网站<a href="https://www.douyu.com/directory/myFollow">http://gz.gec-edu.org/?gzbdgzbdyueqianpc23</a>
        <span id="loginSpan"></span>
        [<a href="toShopCarPage">我的购物车</a>]
        [<a href="toOrderDetailPage">我的订单</a>]
        [<a href="#">设置为首页</a>]
        [<a href="#">加入收藏</a>]
    </div>
    <!--头页的第二部分-->
    <div style="width: 1000px;height: 150px;;position: relative">
        <img src="images/article/logo.gif">
        <img src="images/banner.gif" alt="" style="margin-top: 10px">

        <div style="position: absolute;right: 50px;top: 30px;font-size: 12px">
            <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">关于我们</a></div>
            <div style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">联系方式</a></div>
        </div>
    </div>
    <!--头页的第三部分-->
    <div style="width: 100%;height: 30px;background-color: #CC3333 ">
        <div style="width: 1000px;height: 30px;">
            <ul>
                <li class="header_li1"><a href="#"> 首页</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0001"> 护肤</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0002"> 彩妆</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0003"> 香氛</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0004"> 身体护理</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0005"> 礼盒套装</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0006"> 母婴专区</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0007"> 男士专区</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0008"> 粉底</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0009"> 粉饼</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0010"> 睫毛膏</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0011"> 唇彩</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0012"> 腮红</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0013"> 食品保障</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0014"> 瘦身类</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0015"> 美容类</a></li>
            </ul>

        </div>

    </div>
</div>


<div style="width: 1000px;height: 500px;margin-top: 200px">
    <!--    第一部分-->
    <table width="100%">
        <tr>
            <td style="width: 50%;"><h6>注册新用户</h6></td>
            <td style="width: 50%;text-align: right;font-size: 12px">我已经注册,现在就&nbsp;&nbsp;&nbsp;<a href="toLoginPage">登录</a>&nbsp;&nbsp;&nbsp;</td>
        </tr>
    </table>
    <!--    第二部分-->
    <div style="width: 100%;height: 100% ;border-left: 2px solid #CCC;border-right: 2px solid #CCC;border-bottom: 2px solid #CCC; margin-top: 20px">
        <div style="margin: 20px;border-bottom: 2px solid #FFDC97; text-align: center">
            <h6 style="color: #A0410A;padding-bottom: 10px">个人用户信息</h6>
        </div>
        <form action="register" method="post" id="myregister">
            <table style="font-size: 13px;border-spacing: 0 10px">
                <tr>
                    <td></td>
                    <td><span style="color: red;margin-left: 50px;font-size: 18px;font-weight: bold">${registerMsg}</span></td>
                    <td></td>
                </tr>
                <tr>
                    <td><span style="color : red">*</span> 登录名:&nbsp;&nbsp;</td>
                    <td><input name="loginName" type="text" style="width: 270px;height: 28px;border: 1px solid #CCC"></td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td><span style="color : red">*</span> 设置密码:&nbsp;&nbsp;</td>
                    <td><input id="password" name="password" type="password" style="width: 270px;height: 28px;border: 1px solid #CCC"></td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td><span style="color : red">*</span> 确认密码:&nbsp;&nbsp;</td>
                    <td><input name="password2" type="password" style="width: 270px;height: 28px;border: 1px solid #CCC"></td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td><span style="color : red">*</span> 真实姓名:&nbsp;&nbsp;</td>
                    <td><input name="name" type="text" style="width: 270px;height: 28px;border: 1px solid #CCC"></td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td>&nbsp;&nbsp;性别:&nbsp;&nbsp;</td>
                    <td>
                        <input type="radio" name="sex" value="0" checked>男&nbsp;&nbsp;
                        <input type="radio" name="sex" value="1" >女&nbsp;&nbsp;
                    </td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td><span style="color : red">*</span> 详细地址:&nbsp;&nbsp;</td>
                    <td><input name="address" type="text" style="width: 270px;height: 28px;border: 1px solid #CCC"></td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td><span style="color : red">*</span> 联系电话:&nbsp;&nbsp;</td>
                    <td><input name="phone" type="text" style="width: 270px;height: 28px;border: 1px solid #CCC"></td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td><span style="color : red">*</span> 验证码:&nbsp;&nbsp;</td>
                    <td>
                        <input name="code" type="text" style="width: 150px;height: 28px;border: 1px solid #CCC">
                        <img id="checkCode" alt="点击更换" placeholder="验证码"  src="getCheckCode"/>
                        <span onclick="changeVerifyCode()"><a href="javascript:;">看不清?&nbsp;换一张</a></span>
                    </td>
                    <td><span></span></td>
                </tr>
                <tr>
                    <td></td>
                    <td><button style="font-family: 宋体;padding: 5px 10px;font-size: 15px;font-weight: bold;color: #FFF;background-color: #FEA913;border-radius: 8px;border: none">同意以下协议,提交</button></td>
                    <td><span></span></td>
                </tr>
            </table>
        </form>
        <textarea  name="" id="" cols="80" rows="5"  style="margin-left: 240px">
广州粤嵌网站用户注册协议

本协议是您与广州粤嵌网站（简称"本站”，网址: www.iKkjava.org)所有者(以下简称为"广州粤嵌"”)之间就广州粤嵌网站服务等相关事宜所订立的契约，请您仔细阅读本注册协议，您点击"同意以下协议，提交"按钮后，本协议即构成对双方有约束力的法律文件。
        </textarea>
    </div>
</div>
</body>
</html>
